<template>
	<view>
		<!-- 头部 -->
		<u-sticky>
			<view class="dingbu mainpadding2" v-if="!is_login" @click="jumper('/pages/login/login')">
				<view class="" :style="{paddingTop:menutop+'rpx'}">
					<view class="flexleft">
						<view class="touxiang margin_right2">
							<image src="@/static/image/system/weidenglu.png" mode=""></image>
						</view>
						<view class="sanshier fonweight xiaohei">未登录，点击登录</view>
					</view>
				</view>
			</view>
			<view class="dingbu mainpadding2" v-if="is_login" @click="jumper('/pages_mine/zhanghusz')">
				<view class="" :style="{paddingTop:menutop+'rpx'}">
					<view class="flexleft">
						<view class="touxiang margin_right2">
							<image :src="userInfo.avatar_text" mode=""></image>
						</view>
						<view class="">
							<view class="sanshier fonweight xiaohei">{{userInfo.nickname}}</view>
							<view class="strongtext nofonweight xiaohei" v-if="userInfo.CardNo">{{userInfo.CardNo}}</view>
						</view>
					</view>
				</view>
			</view>
		</u-sticky>
		<!--  -->
		<view class="" style="background-color:#FED6D0;">
			<view class="" style="padding: 0 30rpx;" @click="jumper('/pages_mine/wodevip')" v-if="userInfo.is_vip">
				<view class="baibox flexbetween">
					<view class="flexleft">
						<image class="huang margin_right1" src="../static/image/system/hg.png" mode=""></image>
						<view class="xiaohui strongtext nofonweight margin_right1">{{userInfo.vip_text}}</view>
						<view class="xiaocheng strongtext nofonweight">有效期至{{userInfo.vip_time}}</view>
					</view>
					<u-icon name="arrow-right" color="#FB7C2F"></u-icon>
				</view>
			</view>
			<view class="" style="padding: 0 30rpx;" @click="jumper('/pages_mine/wodevip')" v-if="!userInfo.is_vip">
				<view class="baibox flexbetween" style="background-color: rgba(0, 0, 0, .6);">
					<view class="flexleft">
						<image class="huang margin_right1" src="../static/image/system/hg.png" mode=""></image>
						<view class="xiaohui strongtext nofonweight margin_right1">您当前不是采购员</view>
					</view>
					<u-icon name="arrow-right" color="#999"></u-icon>
				</view>
			</view>
			<view class="qianfbox mainpadding flexbetween">
				<view class="ershiw flexcenter" @click="jumper('/pages_mine/xiaoxitongzhi')">
					<view class="dingwei">
						<view class="ershiba xiaohei textcenter">消息通知</view>
						<view class="sanshier xiaohong fonweight margin_top textcenter">{{userInfo.notice_total_num || 0}}条
						</view>
						<view class="huanbtn"  v-if="userInfo.notice_no_read_num">{{userInfo.notice_no_read_num}}</view>
					</view>
				</view>
				<view class="ershiw flexcenter" @click="jumper('/pages_mine/wodejuanbao')">
					<view class="dingwei">
						<view class="ershiba xiaohei textcenter">券包</view>
						<view class="sanshier xiaohong fonweight margin_top textcenter">{{userInfo.coupon_num || 0}}张</view>
					</view> 
				</view>
				<view class="ershiw flexcenter" @click="jumper('/pages_mine/chuzhi')">
					<view class="dingwei">
						<view class="ershiba xiaohei textcenter">储值</view>
						<view class="sanshier xiaohong fonweight margin_top textcenter">￥{{userInfo.money || 0}}</view>
					</view>
				</view>
				<view class="ershiw flexcenter" @click="jumper('/pages_mine/caigouma')">
					<view class="dingwei">
						<view class="caigoum">
							<image src="@/static/image/system/ewm.png" mode=""></image>
						</view>
						<view class="ershiba xiaohei margin_top1">采购码</view>
					</view>
				</view>
			</view>
		</view>
		<view class="mainpadding">
			<!-- 采购记录 -->
			<view class="ffffff mainpadding radius">
				<view class="ershiba xiaohei fonweight">采购记录</view>
				<view class="flexbetween margin_top">
					<view class="">
						<view class="cgicon">
							<image src="../static/image/system/dfk.png" mode=""></image>
						</view>
						<view class="strongtext xiaohei margin_top1">待付款</view>
					</view>
					<view class="">
						<view class="cgicon">
							<image src="../static/image/system/dfh.png" mode=""></image>
						</view>
						<view class="strongtext xiaohei margin_top1">待发货</view>
					</view>
					<view class="" @click="order(1)">
						<view class="cgicon">
							<image src="../static/image/system/dpj.png" mode=""></image>
						</view>
						<view class="strongtext xiaohei margin_top1">待评价</view>
					</view>
					<view class="" @click="order(0)">
						<view class="cgicon">
							<image src="../static/image/system/qb.png" mode=""></image>
						</view>
						<view class="strongtext xiaohei margin_top1">全部</view>
					</view>
				</view>
			</view>
			<!-- 分佣中心 -->
			<view class="ffffff mainpadding radius margin_top">
				<view class="ershiba xiaohei fonweight">分佣中心</view>
				<view class="flexbetween margin_top">
					<view class="" @click="jumper('/pages_mine/yaoqinghy')">
						<view class="cgicon1">
							<image src="../static/image/system/yqm.png" mode=""></image>
						</view>
						<view class="strongtext xiaohei margin_top1">邀请码</view>
					</view>
					<view class="" @click="jumper('/pages_index/fenyongzx')">
						<view class="cgicon1">
							<image src="../static/image/system/yjze.png" mode=""></image>
						</view>
						<view class="strongtext xiaohei margin_top1">佣金总额</view>
					</view>
					<view class="" @click="jumper('/pages_index/fenyongzx')">
						<view class="cgicon1">
							<image src="../static/image/system/yyq.png" mode=""></image>
						</view>
						<view class="strongtext xiaohei margin_top1">已邀请</view>
					</view>
					<view class="" @click="jumper('/pages_index/fenyongzx')">
						<view class="cgicon1">
							<image src="../static/image/system/qb1.png" mode=""></image>
						</view>
						<view class="strongtext xiaohei margin_top1">全部</view>
					</view>
				</view>
			</view>
			<!-- 服务中心 -->
			<view class="ffffff mainpadding radius margin_top">
				<view class="ershiba xiaohei fonweight">服务中心</view>
				<view class="flexbetween flex_wrap">
					<view class="huangbox flexbetween margin_top" @click="jumper('/pages_mine/wodevip')">
						<view class="">
							<view class="xiaoka fonweight ershiba">绑定副卡</view>
							<view class="xiaoka nofonweight strongtext margin_top1">亲属卡</view>
						</view>
						<view class="fuwicon">
							<image src="../static/image/system/qsk.png" mode=""></image>
						</view>
					</view>
					<view class="huangbox flexbetween margin_top" @click="jumper('/pages_mine/zhanghusz')">
						<view class="">
							<view class="xiaoka fonweight ershiba">账户设置</view>
						</view>
						<view class="fuwicon">
							<image src="../static/image/system/zhsz.png" mode=""></image>
						</view>
					</view>
					<view class="huangbox flexbetween margin_top" @click="tzgywm(1)">
						<view class="">
							<view class="xiaoka fonweight ershiba">我要提建议</view>
						</view>
						<view class="fuwicon">
							<image src="../static/image/system/jy.png" mode=""></image>
						</view>
					</view>
					<view class="huangbox flexbetween margin_top" @click="phone(systeminfo.kf_mobile)">
						<view class="">
							<view class="xiaoka fonweight ershiba">联系客服</view>
							<view class="xiaoka nofonweight strongtext margin_top1">{{systeminfo.kf_mobile}}</view>
						</view>
						<view class="fuwicon">
							<image src="../static/image/system/lxkf.png" mode=""></image>
						</view>
					</view>
					<view class="huangbox flexbetween margin_top" @click="tzgywm(2)">
						<view class="">
							<view class="xiaoka fonweight ershiba">我要投诉</view>
						</view>
						<view class="fuwicon">
							<image src="../static/image/system/wyts.png" mode=""></image>
						</view>
					</view>
					<view class="huangbox flexbetween margin_top" @click="jumper('/pages/system?type=3')">
						<view class="">
							<view class="xiaoka fonweight ershiba">关于我们</view>
						</view>
						<view class="fuwicon">
							<image src="../static/image/system/gywm.png" mode=""></image>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	const httpRequest = require("@/common/httpRequest.js")
	export default {
		data() {
			return {
				is_login: false,
				userInfo: {},
				menutop: 0,
				systeminfo:{},
			}
		},
		onLoad() {
			this.systemfn()
			this.menutop = uni.getMenuButtonBoundingClientRect().top * 2
		},
		onShow() {
			this.is_login = httpRequest.checkIsLogin();
			if (this.is_login) {
				this.init()
			}else{
				this.userInfo = {}
			}
		},
		onShareAppMessage() {
			let _this = this
			return {
				title: "一点点大药房",
				path: "pages/index?code=" + uni.getStorageSync("yqm"),
			}
		},
		onShareTimeline: function() {
			return {
				title: "一点点大药房",
				path: "pages/index?code=" + uni.getStorageSync("yqm"),
			}
		},
		methods: {
			systemfn() {
				httpRequest.request('/api/index/getConfigInfo', 'GET', {}).then(res => {
					this.systeminfo = res.data
				})
			},
			init() {
				httpRequest.request('/api/user/index', 'GET', {}).then(res => {
					this.userInfo = res.data
					uni.setStorageSync("yqm",res.data.invite_code)
				})
			},
			// 跳转采购记录
			order(i) {
				if (!httpRequest.checkIsLogin()) {
					uni.navigateTo({
						url: "/pages/login/wxlogin"
					})
					return false
				}
				uni.navigateTo({
					url: '/pages_mine/caigoujl?i=' + i
				})
			},
			tzgywm(i) {
				uni.navigateTo({
					url: '/pages_mine/yijianfankui?id=' + i
				})
			},
			jumper(url) {
				if (!httpRequest.checkIsLogin()) {
					uni.navigateTo({
						url: "/pages/login/wxlogin"
					})
					return false
				}
				uni.navigateTo({
					url: url
				})
			},
			phone(p) {
				uni.makePhoneCall({
					phoneNumber: p.toString()
				}).catch((e) => {
					// console.log(e)  //用catch(e)来捕获错误{makePhoneCall:fail cancel}
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.huanbtn {
		position: absolute;
		top: -10rpx;
		right: -28rpx;
		width: 36rpx;
		height: 36rpx;
		background: linear-gradient(90deg, #F7913D 0%, #EC682B 100%);
		border-radius: 33rpx 33rpx 33rpx 33rpx;
		font-size: 24rpx;
		font-weight: 300;
		color: #FFFFFF;
		display: flex;
		align-items: center;
		justify-content: center;

	}

	.fuwicon {
		width: 62rpx;
		height: 59rpx;

		image {
			width: 100%;
			height: 100%;
		}
	}

	.huangbox {
		width: 42%;
		background: #FBF4EF;
		border-radius: 16rpx 16rpx 16rpx 16rpx;
		padding: 17rpx 20rpx;
	}

	.cgicon1 {
		width: 58rpx;
		height: 60rpx;
		margin: auto;

		image {
			margin: auto;
			width: 100%;
			height: 100%;
		}
	}

	.cgicon {
		width: 53rpx;
		height: 56rpx;
		margin: auto;

		image {
			margin: auto;
			width: 100%;
			height: 100%;
		}
	}

	.caigoum {
		width: 72rpx;
		height: 72rpx;
		margin: auto;

		image {
			margin: auto;
			width: 100%;
			height: 100%;
		}
	}

	.qianfbox {
		background-color: #fdf4f4;
		border-radius: 40rpx 40rpx 0rpx 0rpx;
	}

	.huang {
		width: 52rpx;
		height: 33rpx;
	}

	.baibox {
		padding: 14rpx 30rpx;
		background: #FFFFFF;
		border-radius: 20rpx 20rpx 0rpx 0rpx;
	}

	.touxiang {
		width: 96rpx;
		height: 96rpx;
		border-radius: 50%;

		image {
			border-radius: 50%;
			width: 100%;
			height: 100%;
		}
	}

	.dingbu {
		background-color: #fed8d3;
	}
</style>